$primary-color: #1678ff;

.footer {
  background-color: #383838;
  background: linear-gradient(#fff,#383838);
  .con-a1 {
    .con {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      color: #fff;
      padding: 30px 0;

      .box-a1 {
        display: flex;
        flex-direction: column;
        position: relative;

        &::before {
          position: absolute;
          top: 50%;
          left: calc(100% + 80px);
          transform: translate(-50%, -50%);
          content: "";
          display: block;
          width: 1px;
          height: 100%;
          background-color: #fff;
        }

        .title {
          font-size: 24px;
          margin-bottom: 50px;
        }

        .desc {
          line-height: 30px;
        }
      }

      .box-a2 {
        display: flex;
        flex-direction: column;

        .title {
          margin-bottom: 30px;

          .tit {
            font-size: 24px;
          }
        }

        .desc {
          font-size: 12px;
          line-height: 30px;
        }
      }

      .wechat {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        background-color: $primary-color;
        border-top-left-radius: 5px;
        border-bottom-left-radius: 5px;

        .txt {
          width: 20px;
          line-height: 16px;

          text-align: center;
          padding: 0 3px;
          box-sizing: content-box;

          font-size: 8px;
        }
      }
    }
  }

  .con-a2 {
    background-color: #383838;
    color: #666666;

    .con {
      .txt {
        line-height: 35px;
        font-size: 12px;
        text-align: center;
      }
    }
  }
}

@media only screen and (max-width: 1199px) {
  .footer {
    .con-a1 {
      .con {
        .box-a1 {
          &::before {
            display: none;
          }
        }

        .wechat {
          display: none;
        }
      }
    }
  }
}


@media only screen and (max-width: 959px) {
  .footer {
    .con-a1 {
      .con {
        flex-direction: column;
        .box-a1 {
          display: none;
        }
        .box-a2{
          margin-bottom: 20px;
        }
        .wechat {
          display: flex;
        }
      }
    }
  }
}